import { type ColProps, type InputProps, type TimePickerDefaultProps, type ElSelect } from 'element-plus';
import { type PropType, type ExtractPropTypes } from 'vue';
import { type InputNumberProps } from '@/components/InputNumber';

type ElSelectProps = InstanceType<typeof ElSelect>['$props'];

// 组件基础属性
type IBase = {
  /** 标签 */
  label?: string;
  /** 标签宽度 */
  labelWidth?: string;
  /** 是否不展示 默认展示 */
  isHidden?: boolean;
  cols?: Partial<ColProps>;
};

type IOptions = {
  /** 下拉组件options */
  options?: {
    [key: string]: any;
  }[];
  /** 下拉组件options的label的name */
  optionLabel?: string;
  /** 下拉组件options的value的name */
  optionValue?: string;
};

type IDateExtraProp = {
  /** 日期组件不可用日期 */
  disabledDate?: (time: Date) => boolean;
  /** 日期格式，默认为 YYYY-MM-DD HH:mm:ss */
  valueFormat?: string;
  /** 日期组件-默认时间 */
  defaultTime?: string[];
};

// 公共属性
type ISlot<T> = {
  component: 'slot';
  prop: keyof T extends string ? keyof T : string;
} & IBase;

// Input 属性
type IInput<T> = {
  component: 'input';
  prop: keyof T extends string ? keyof T : string;
} & IBase &
  Partial<InputProps>;

// Select 属性
type ISelect<T> = {
  component: 'select';
  prop: keyof T extends string ? keyof T : string;
} & IBase &
  IOptions &
  Partial<ElSelectProps>;

// DatePicker 属性
type IDatePicker<T> = {
  component: 'datePicker';
  prop: (keyof T extends string ? keyof T : string) | Array<keyof T extends string ? keyof T : string>;
} & IBase &
  IDateExtraProp &
  Partial<TimePickerDefaultProps>;

// InputNumber 属性
type IInputNumber<T> = {
  component: 'inputNumber';
  prop: keyof T extends string ? keyof T : string;
  // props?: Partial<InputNumberProps>;
} & IBase &
  Partial<InputNumberProps>;

export type IConfigItem<T extends object = any> = IInput<T> | ISelect<T> | IDatePicker<T> | IInputNumber<T> | ISlot<T>;

/** 搜索按钮位置 */
export enum ButtonPositionEnum {
  IN = 'in',
  OUT = 'out',
  LAST = 'last',
}

export const searchAreaProps = Object.assign({}, {
  cols: {
    type: Object as PropType<Partial<ColProps>>,
    default: () => ({}),
  },
  /** 传入的配置项 */
  config: {
    type: Array as PropType<IConfigItem[]>,
    required: true,
  },
  /** 传入的v-model值 */
  modelValue: {
    type: Object,
    required: true,
  },
  /** 默认显示的标签宽度 */
  labelWidth: {
    type: String,
    default: '96px',
  },
  /** 按钮渲染在表单内 Or 外 */
  buttonPosition: {
    type: String as PropType<ButtonPositionEnum>,
    default: ButtonPositionEnum.IN,
  },
  /** 下边距 */
  marginBottom: {
    type: String,
    default: '15px',
  },
  /** 高级筛选 or 展开 */
  showFilter: {
    type: Boolean,
    default: false,
  },
} as const);

export type SearchAreaProps = ExtractPropTypes<typeof searchAreaProps>;
